<template>
    <div>
        <v-header style="border-color: #f8f8f8">
            <div class="backs_icon" slot="left"></div>
        </v-header>
        <div class="main_allScroll" style="background-color: #fff;">
            <div class="tab">
                <button-tab v-model="tabType">
                    <button-tab-item selected @on-item-click="tabTypeChange(0)">线上提现</button-tab-item>
                    <button-tab-item @on-item-click="tabTypeChange(1)">线下提现</button-tab-item>
                </button-tab>
            </div>
            <div class="listContent">
                <scroller :on-infinite="loadMore ? infinite: finish" ref="myscroller">
                    <div class="list vux-1px-b" v-for="v in list" @click="gotoPage(v)">
                        <div>
                            <span v-if="tabType == 0">{{v.mode == 1 ? '微信' : v.mode == 2 ? '支付宝' : ''}}提现</span>
                            <span v-if="tabType == 1">线下提现</span>
                            <span :style="{color:v.status == 0?'#e94f4f':'#666'}">{{(v.status == 0 || v.status == 10) ? '处理中' : v.status == 1 ? '已到账' : v.status == 2 ? '提现失败': ''}}</span>
                        </div>
                        <div>
                            <span v-if="tabType == 0">{{v.applyDrawbackTime}}</span>
                            <span v-if="tabType == 1">{{v.submitTime}}</span>
                            <span style="color:#333">-{{v.amount}}</span>
                        </div>
                    </div>
                    <load-more v-show="loadMore" :show-loading="false" tip="我是有底线的" background-color="#fbf9fe"></load-more>
                </scroller>
            </div>
        </div>
    </div>
</template>
<script>
    import {ButtonTab, ButtonTabItem} from 'vux'
    export default {
        name: 'detailList',
        components:{
            ButtonTab, ButtonTabItem
        },
        data(){
          return {
              pageNum: 1,
              list: [],
              loadMore: false,
              tabType: 0,
              scrollPos: 0
          }
        },
        mounted: function(){
        },
        activated(){
            if(this.$router.isToNext){
                this.pageNum = 1
                this.tabType = 0
                this.loadMore = false
                this.list= []
                this.scrollPos = 0
                this.getList()
            } else {
                setTimeout(()=>this.$refs.myscroller.scrollTo(0,this.scrollPos, false), 10)
            }
        },
        deactivated(){
            this.scrollPos = this.$refs.myscroller.getPosition().top
        },
        methods:{
            init(){
                this.pageNum = 1
                this.loadMore = false
            },
            tabTypeChange(index) {
                this.tabType = index;
            },
            getDetil(done){
                this.$ajax.finance.queryBalanceRecord({
                    pageNum: this.pageNum,
                    pageSize: 15
                })
                    .then(res => {
                        if(done){
                            done()
                        }
                        if(this.pageNum == 1){
                            this.list = res.body.content.list
                        } else {
                            this.list = this.list.concat(res.body.content.list)
                        }

                        if(res.body.content.list.length < 15){
                            this.loadMore = false
                        }else{
                            this.pageNum++
                            this.loadMore = true
                        }
                    })
            },
            //  线上提现接口
            queryDrawbackInfoList(done){
                this.$ajax.finance.queryDrawbackInfoList({
                    pageNum: this.pageNum,
                    pageSize: 15
                })
                    .then(res => {
                        if(done){
                            done()
                        }
                        this.handleData(res.body.content)
                    })
            },
            //  5.线下提现列表
            queryUnderlineDrawbackInfoList(done){
                this.$ajax.finance.queryUnderlineDrawbackInfoList({
                    pageNum: this.pageNum,
                    pageSize: 15
                })
                    .then(res => {
                        if(done){
                            done()
                        }
                        this.handleData(res.body.content)
                    })
            },
            handleData(data){
                if(this.pageNum == 1){
                    this.list = data.list
                } else {
                    this.list = this.list.concat(data.list)
                }

                if(data.list.length < 15){
                    this.loadMore = false
                }else{
                    this.pageNum++
                    this.loadMore = true
                }
            },
            infinite(done){
                this.loadMore = false
                this.getList(done)
            },
            finish(done){
                this.$refs.myscroller.finishInfinite(2);
            },
            gotoPage(data){
                var obj
                if(this.tabType == 0){
                    obj = {drawbackId: data.drawbackId}
                } else {
                    obj = {recordId: data.recordId}
                }
                this.$router.push({path:'/PresentationMode/detailList/detail', query: obj})
            },
            getList(done){
                if(this.tabType === 0){
                    //  线上提现
                    this.queryDrawbackInfoList(done || false)
                } else {
                    this.queryUnderlineDrawbackInfoList(done || false)
                }
            }
        },
        watch: {
            tabType: function () {
                this.init()
                this.getList()
            }
        }
    }
</script>
<style lang="less" scoped>
    .tab{
        padding: .4rem .2rem;
    }
    .tab .vux-button-group > a.vux-button-group-current{
        background: #333;
        color: #fff;
    }
    .tab .vux-button-group > a{
        color: #333;
    }
    .tab .vux-button-group > a.vux-button-tab-item-first:after, .tab .vux-button-group > a.vux-button-tab-item-middle:after, .tab .vux-button-group > a.vux-button-tab-item-last:after{
        border-color:#333;

    }
    .tab .vux-button-group > a.vux-button-tab-item-first, .tab .vux-button-group > a.vux-button-tab-item-first:after{
        border-top-left-radius: .12rem;
        border-bottom-left-radius: .12rem;
    }
    .tab .vux-button-group > a.vux-button-tab-item-last, .tab .vux-button-group > a.vux-button-tab-item-last:after{
        border-top-right-radius: .12rem;
        border-bottom-right-radius: .12rem;
    }
    .main_allScroll{
        display: flex;
        flex-direction: column;
    }
    .listContent{
        flex: 1;
        position: relative;
    }
    .list {
        padding: 0.28rem 0.24rem 0.16rem 0.3rem;
        div {
            display: flex;
            justify-content: space-between;
            align-items: center;
            &:first-of-type {
                font-size: 0.28rem;
                line-height: 1.5;
                color: #333;
                text-align: left;
                span{
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                span:first-of-type {
                    max-width: 60%;
                }
                span:last-of-type {
                    max-width: 40%;
                    color: #999;
                    text-align: right;
                    font-size: .24rem;
                    margin-top: 0.04rem;
                }
            }
            &:last-of-type {
                font-size: 0.26rem;
                line-height: 1.5;
                text-align: left;
                color: #666;
                margin-top: 0.2rem;
                span:last-of-type {
                    text-align: right;
                    color: #333;
                    font-weight: bold;
                    &.up {
                        color: #E94f4f;
                    }
                }
            }
        }
    }
</style>